<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reactlesson8</title>

    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
    class LikeButton extends React.Component {
        constructor(props) {
            super(props);
            this.state = { liked: false };
            //this.handleClick = this.handleClick.bind(this);
        }

        handleClick(pm1,pm2,e) {
            alert(pm1 +"---"+ pm2);
            this.setState({liked: !this.state.liked});
        }

        render() {
            /**
             * var 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象 变量提升就是后面申明的变量被提什到最顶端，但是只会提什申明变量，不会提升值
             * let 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
             * const 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值
             * */
            let text = this.state.liked ? 'like' : 'haven\'t liked';
            let mystate = this.state.liked ? 'true' : 'false';
            alert(mystate +"---"+ text);
            return (
                    <p onClick={this.handleClick.bind(this,'im a param1','im a param2')}>
                        You {text} this [{mystate}]. Click to toggle.
                    </p>
            )
        }
    }

    ReactDOM.render(
        <LikeButton/>,
        document.getElementById("example")
    );
</script>
</body>
</html>